@import "_mixins.sass"
@import "_variables.sass"

.navbar
    background-color: $theme-color
    padding: 0px 8px

    .nav-divider
        padding-left: 16px
        padding-right: 16px

    .navbar-brand
        font-size: $font-xxlarge
        text-decoration: none
        padding-top: 0px
        padding-bottom: 0px

        img
            height: $primary-nav-height
            width: auto

    .form-inline
        margin-left: 0px

        .form-control
            width: 350px
            background-color: #000
            border: 1px solid #666
            color: #fff

            &:focus
                background-color: #fff
                color: $primary-text-color

    .navbar-toggler
        margin-top: 0

    &.navbar-dark
        .navbar-nav
            .active
                >.nav-link
                    color: $white
                    font-weight: $font-bold
            .nav-link
                color: $white

                &.primary
                    background-color: #0073eb

                    &:hover
                        background-color: #3095ff

                i
                    margin-right: 6px

                &:hover
                    color: $accent-color

    .sub-menu
        width: 320px
        color: #fff
        background: #000

        // To reverse default padding bottom behavior on bootstrap menu.
        padding-bottom: 0px
        margin-top: 0px

        li
            a
                display: block

            &:hover
                background-color: #2d2d2d

            &:active
                background-color: #444

        .title
            color: white
            margin: 0

        .sub-title
            font-size: $font-small
            color: $light-font

    li.dropdown:hover
        > ul.dropdown-menu
            display: block

body
    >#content
        margin-top: $primary-nav-height

        .version-switcher
            border-bottom: 1px solid #ccc
            overflow: hidden
            padding-bottom: 18px

            .version-label
                float: left

            .version-row
                float: right

                button.selected-version
                    background-color: transparent
                    border-width: 0px
                    border-radius: 2px
                    cursor: pointer

                    &:hover
                        background-color: #ddd

                .dropdown-menu
                    padding: 0px
                    margin: 0px

                    .dropdown-item
                        color: $primary-text-color

                    .version-api
                        color: #afafaf


        // BELOW IS THE FIXED VERSION WHICH IS BEING DEPRECATED FOR NOW.
        // .version-switcher
        //     float: right
        //     position: fixed
        //     bottom: 0px
        //     right: 0px
        //     // This is a bad number, but just corrects for another high number for the right bar.
        //     z-index: 2000


            // .version-row
            //     button
            //         display: inline
            //         border-width: 0px
            //         cursor: pointer
            //
            //     button.selected-version
            //         background-color: #9977ef
            //         color: #fff
            //         padding: 6px 12px
            //         border-radius: 2px
            //         margin-right: 1em
            //         opacity: 0.75
            //
            //         &::after
            //             vertical-align: .1em
            //
            //         &:hover
            //             opacity: 1
            //



    &.invert
        .navbar-brand
            color: $accent-color

            &:hover, &active
                color: $accent-color

            img
                content: url("/static/images/logo.png")

        .navbar
            background-color: transparent

            .navbar-nav
                .active
                    >.nav-link
                        color: $accent-color
                        font-weight: $font-bold
                .nav-link
                    color: $accent-color

            &.navbar-dark
                .navbar-toggler
                    color: $accent-color
                    border-color: $accent-color

                    .navbar-toggler-icon
                        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$accent-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")

        .footer-nav
            background-color: transparent

.panel-layout
    .sidebar-container
        .sidebar-toggle
            width: 100%
            padding: 4px
            .btn-default
                margin: 0px
        .sidebar
            background-color: $side-panel-bg-color
            padding: $sidebar-padding
            height: 100%

            .chapter
                margin: 0px


            .sidebar-edit-wrapper
                text-align: right

                .sidebar-edit
                    background-color: transparent
                    border-width: 0px
                    margin-top: 12px
                    cursor: pointer
                    opacity: 0.5

                    &:hover
                        opacity: 1

                    i
                        margin-right: 6px

            .search-form
                .query
                    width: 100%
                    padding: 8px 24px 8px 16px
                    border-radius: 15px
                    border: 1px solid #e0e0e0

                input[type=text]
                    font-size: $font-medium

                    &:focus
                        border-color: $accent-color

                    &::placeholder
                        color: #e0e0e0

                i
                    float: right
                    position: relative
                    margin-right: 8px
                    margin-top: -28px
                    z-index: 2
                    color: #e0e0e0

            h3
                padding: 16px 0 8px 0
                font-weight: $font-bold
                font-size: $font-large

                &.active
                    color: $accent-color

            ul, ol
                li
                    line-height: 20px
                    padding-bottom: 10px

                    .panel-collapse
                        padding-top: 10px


            a
                color: $primary-text-color

                &.title-with-toggle
                    display: inline-block
                    max-width: $sidebar-width - ($sidebar-padding * 3) - $sidebar-arrow-width

                .toggle
                    width: $sidebar-arrow-width
                    margin-right: 0px
                    float: right

                &:hover, &:active
                    color: $accent-color

                &.active
                    color: $accent-color

                &.collapsed
                    .dropdown-toggle
                        transform: rotate(0deg)

                .dropdown-toggle
                    float: right
                    width: 8px
                    right: 0px
                    transform: rotate(180deg)

                    &::after
                        vertical-align: .1em
                        border-top: .5em solid

        .section
            .panel-collapse
                padding-left: 18px

    .panel-content
        padding-left: 0px

        .panel-inner
            display: block

.doc-content
    display: block

    h1:before,h2:before,h3:before
        display: block
        content: " "
        margin-top: -$primary-nav-height
        height: $primary-nav-height
        visibility: hidden

.permalinks-nav
    margin: 0
    display: block
    width: 100%
    margin: $content-padding 16px 0 16px

    ol,ul
        margin-bottom: 0px

        &:first-child
            border-left: 2px solid $theme-color

        &:first-child,&:nth-child(2)
            padding-left: 18px
        a
            width: 100%
            display: inline
            white-space: nowrap
            text-overflow: ellipsis
            overflow: hidden
            color: $primary-text-color

            &:hover,&.active
                color: $accent-color

        .toggle
            display: inline
            padding-right: 22px
            margin: -18px

            &:before
                content: "\f146"

            &.hidden
                display: none

            &.collapsed
                &:before
                    content: "\f0fe"

        ol
            padding-left: 18px

@media (min-width: 992px)
    .panel-layout
        .sidebar-container
            display: inline
            width: $sidebar-width
            float: left

            .sidebar
                top: $primary-nav-height
                width: $sidebar-width
                padding-bottom: $primary-nav-height * 2

        .panel-content
            margin-left: $sidebar-width

    .with-permalink-nav
        @include calc( width, '100% - ' + $permalink-nav-width)

    .permalinks-nav
        height: 100%
        width: $permalink-nav-width
        float: right
        padding-left: 0px
        padding-bottom: 160px

        a
            text-decoration: none
            color: black

            &:visited
                color: black
                text-decoration: none

            &:hover
                color: $accent-color
                text-decoration: none

    .sidebar-toggle
        display: none

    .sidebar.collapse
        display: block

    .navbar
        .form-inline
            margin-left: 12px

.footer-nav
    color: #ccc
    margin: 0px 30px
    border-top: 1px solid #eee

    .intern-console
        margin-left: 50px
        margin-right: 19px
        color: #ccc
        font-size: 12px
        line-height: 30px
        width: 150px
        float: left
        display: inline

    .chat-console
        padding-left: 50px
        color: #ccc
        font-size: 12px
        width: 600px
        float: left
        display: inline
        border-left: 1px solid rgba(241, 242, 244, 0.2)
        border-right: 1px solid rgba(241, 242, 244, 0.2)
        .sub-top-nava > li
            line-height: 30px
            width: 25%
            float: left
            display: inline
            margin-bottom: 20px

    .public-console
        margin-left: 49px
        margin-right: 50px
        width: 100px
        float: left
        display: inline
        >
            *
                vertical-align: left
            img
                margin-right: 5px
            p
                color: #ccc
                font-size: 14px
    .contact-us
        color: #fff
        text-align: center
        line-height: 30px
        font-size: 14px
        margin-bottom: 20px
        padding-top: 40px
        >
            *
                vertical-align: middle
            img
                margin-right: 5px
            a
                color: #fff
    .friendly-links
        text-align: center
        margin-bottom: 40px
        > li
            display: inline-block
            padding: 0 10px
            line-height: 12px
            > a
                color: #ccc
                font-size: 12px
    .copyright
        color: #666
        font-size: 12px
        width: 100%
        text-align: center
        padding: 20px 0 20px
        margin-bottom: 0px

        > a
            color: #fff

.modal-button-group
    a, a:visited
        color: black

.menu-editor-links
    // The first level links.
    > .menu-editor-link
        margin-bottom: 12px

        > .menu-editor-link-info .menu-editor-link-info-title
            font-weight: bold

    .menu-editor-link
        .menu-editor-link-info
            padding-top: 6px
            padding-bottom: 6px
            border: 1px solid #efefef

            .menu-editor-link-info-title
                cursor: move

            .menu-editor-link-info-actions
                text-align: right

                .menu-editor-link-info-action
                    cursor: pointer
                    opacity: 0.5
                    margin-right: 12px

                    &:hover
                        opacity: 1

        // Accounting for 2 levels of nesting.
        .menu-editor-link
            .menu-editor-link-info-title
                margin-left: 24px

            .menu-editor-link
                .menu-editor-link-info-title
                    margin-left: 48px


// From https://github.com/bassjobsen/typeahead.js-bootstrap4-css/blob/master/typeaheadjs.css.
span.twitter-typeahead .tt-menu
    cursor: pointer
    // Bad way to account for paddings.
    width: 98%

    .row
        &.footer, &.no-results
            padding: 4px 0px
            margin: 0
            overflow: hidden

        &.no-results
            opacity: 0.5
            font-weight: bold
            cursor: default

        &.footer
            margin-top: 8px

            input
                color: $home-link
                background: none
                border: 0
                cursor: pointer
                padding: 0

                &:hover
                    color: $home-link-hover

            &:hover
                background-color: #f5f5f5


.dropdown-menu, span.twitter-typeahead .tt-menu
    position: absolute
    top: 100%
    left: 0
    z-index: 1000
    display: none
    float: left
    min-width: 160px
    padding: 5px 0
    font-size: 1rem
    color: #373a3c
    text-align: left
    list-style: none
    background-color: #fff
    background-clip: padding-box
    border: 1px solid rgba(0, 0, 0, 0.15)
    border-radius: 0.25rem

span.twitter-typeahead .tt-suggestion
    padding: 4px 0px
    margin: 0px
    clear: both
    font-weight: normal
    line-height: 1.5
    color: #373a3c
    text-align: inherit
    white-space: nowrap
    background: none
    border: 0

    .title
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap

        .prefix
            color: #999

    .type
        font-size: $font-small
        color: $curious-blue

span.twitter-typeahead .tt-suggestion:focus, .dropdown-item:hover, span.twitter-typeahead .tt-suggestion:hover
    color: #2b2d2f
    text-decoration: none
    background-color: #f5f5f5

span.twitter-typeahead .active.tt-suggestion, span.twitter-typeahead .tt-suggestion.tt-cursor, span.twitter-typeahead .active.tt-suggestion:focus, span.twitter-typeahead .tt-suggestion.tt-cursor:focus, span.twitter-typeahead .active.tt-suggestion:hover, span.twitter-typeahead .tt-suggestion.tt-cursor:hover
    color: #fff
    text-decoration: none
    background-color: #0275d8
    outline: 0

span.twitter-typeahead .disabled.tt-suggestion, span.twitter-typeahead .disabled.tt-suggestion:focus, span.twitter-typeahead .disabled.tt-suggestion:hover
    color: #818a91

span.twitter-typeahead .disabled.tt-suggestion:focus, span.twitter-typeahead .disabled.tt-suggestion:hover
    text-decoration: none
    cursor: not-allowed
    background-color: transparent
    background-image: none
    filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)"

span.twitter-typeahead
    width: 100%
    .input-group span.twitter-typeahead
        display: block !important
        .input-group span.twitter-typeahead .tt-menu
            top: 2.375rem !important

@media (max-width: 991px)
    .navbar

        .sub-menu
            position: relative
            left: 10px
            padding: 0px

            li
                a
                    padding: 0!important
